#{extends 'main.html' /}
#{set title:'Overview' /}
#{set 'moreStyles'}
	#{stylesheet 'overview.css'/}
#{/set}
#{set 'moreScripts'}
    #{script 'overview.js'/}
    #{script 'tabs.js'/}
#{/set}




<div id="main" class="span-24 last">
	
		<!-- <h2>Hallo, ${custom.person.firstName} ${custom.person.lastName}</h2> -->
	
	<div id="tabContainer">
		<div class="tabs">
			<ul>
				<li id="tabHeader_1">Abgeschlossen</li>
				<li id="tabHeader_2">Vollständig & nicht abgeschickt</li>
				<li id="tabHeader_3">Unvollständig</li>
		   </ul>
		</div>
		<div class="tabscontent">
			<div class="tabpage" id="tabpage_1">
				#{if appFrozen} 
					#{list items:appFrozen, as:'appointment'}
					
					<div class="appointmentOverview">
						<div>
							<img class="restaurantimageoverview" src="../public/images/restaurant-pics/restaurant${appointment.restaurant.id}.jpg" height="80px"></img>
							</div>
						<div class="appointmentRestaurant">
							<h3>${appointment.restaurant.name}</h3>
							<p>Datum: <strong>${appointment.date}</strong> 			Zeit: <strong>${appointment.time} Uhr</strong></p>
							<p>${appointment.comment}</p>
							<a href="@{AppointmentCreation.overviewDetail(appointment.id)}">Details</a>
						</div>
						</div>
						#{/list} #{/if}
						</div>
			<div class="tabpage" id="tabpage_2">
				#{if appComplete}
				#{list items:appComplete, as:'appointment'}	
				<div class="appointmentOverview">
					<div>
						<img class="restaurantimageoverview" src="../public/images/restaurant-pics/restaurant${appointment.restaurant.id}.jpg" height="80px"></img>
						</div>
					<div class="appointmentRestaurant">
						<h3>${appointment.restaurant.name}</h3>
						<p>Datum: <strong>${appointment.date}</strong> 			Zeit: <strong>${appointment.time} Uhr</strong></p>
						<p>${appointment.comment}</p>
						<a href="@{AppointmentCreation.overviewDetail(appointment.id)}">Details</a>  <a href="@{AppointmentCreation.setFrozen(appointment.id)}">Abschicken</a> <a href="@{AppointmentCreation.delete(appointment.id)}">Verwerfen</a>
					</div>
					</div>
				#{/list} #{/if}
				</div>
					<div class="tabpage" id="tabpage_3">
				#{if appIncomplete}
				#{list items:appIncomplete, as:'appointment'}	
				<div class="appointmentOverview">
					<div>
						<img class="restaurantimageoverview" src="../public/images/restaurant-pics/restaurant${appointment.restaurant.id}.jpg" height="80px"></img>
						</div>
					<div class="appointmentRestaurant">
						<h3>${appointment.restaurant.name}</h3>
						<p>Datum: <strong>${appointment.date}</strong> 			Zeit: <strong>${appointment.time} Uhr</strong></p>
						<p>${appointment.comment}</p>
						<a href="@{AppointmentCreation.overviewDetail(appointment.id)}">Details</a> <a href="@{AppointmentCreation.delete(appointment.id)}">Verwerfen</a>
					</div>
					</div>
				#{/list} #{/if}
				</div>
				
				
			</div>
	</div>
</div>

